import React, { useState, useEffect } from 'react';
import { exportWord } from 'mhtml-to-word'
import { Popconfirm, Breadcrumb, Row, Col, Button, Divider, Input, Select, Table, Form, Modal } from 'antd'


import { SearchOutlined, DownloadOutlined, PrinterOutlined, EyeOutlined } from '@ant-design/icons';
import axios from 'axios';
const ShouFeiBiaoZhun = () => {
    const { Option } = Select;

    //table数据
    const [dataSource, setDataSource] = useState([]);

    //table表头
    const columns = [
        {
            title: '收费类型',
            dataIndex: 'shouFeiLeiXingMingCheng',
            key: 'shouFeiLeiXingMingCheng',
            align: "center",
            width: 200
        },
        {
            title: '收费名称',
            dataIndex: 'shouFeiMingCheng',
            key: 'shouFeiMingCheng',
            align: "center",
            width: 200
        },
        {
            title: '单价',
            dataIndex: 'danJia',
            key: 'danJia',
            align: "center",
            width: 200
        },
        {
            title: '计量单位',
            dataIndex: 'jiLiangDanWei',
            key: 'jiLiangDanWei',
            align: "center",
            width: 200
        },
        {
            title: '收费标准',
            dataIndex: 'shouFeiBiaoZhunLeiXing',
            key: 'shouFeiBiaoZhunLeiXing',
            align: "center",
            width: 200

        },
        {
            title: "操作",
            dataIndex: 'operation',
            key: 'operation',
            ellipsis: true,
            align: 'center',
            width: "300px",
            render: (record, row) => {
                return (
                    <>
                        <Row justify="center">
                            <Col span={8}><Button type="primary" onClick={() => showModal(row)} icon={<EyeOutlined />}>查看</Button></Col>
                        </Row>
                    </>
                )
            }
        }
    ];

    //table分页
    const [total, setTotal] = useState(0)
    const paginationProps = {
        page: 10,
        onChange: (page) => { getData(page) },
        total:{total} ,
        showQuickJumper: true,
        showTotal: (total, range) => `共${total}条数据`,
        position: ["bottomCenter"]
    }



    //模态框设置
    const [isModalVisible, setIsModalVisible] = useState(false);

    const [form] = Form.useForm()
    const showModal = (row) => {
        console.log(row)
        setIsModalVisible(true);
        form.setFieldsValue(row)
    };

    const handleOk = async () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };






    //打印按钮设置
    function exportTable(){
        exportWord({
            filename: "收费标准表",
            selector: ".export",
            style:''
        })
    }




    //搜索
    const [optionValue,setOptionValue]=useState()
    const onFinish = (values) => {
        console.log('Success:', values);
        values.shouFeiBiaoZhunLeiXing=optionValue
        values.page=1

        axios("/shouFeiBiaoZhunBiao/chaXunFenYe",{
            params:{...values}
        })
        .then(res=>{
            // console.log(res)
            res.data.data.forEach((item, index, arr) => {
                item.shouFeiBiaoZhunLeiXing = item.shouFeiBiaoZhuLeiXing.shouFeiBiaoZhunLeiXing
                item.shouFeiLeiXingMingCheng = item.shouFeiLeiXing.shouFeiLeiXingMingCheng
            })
            // console.log(res.data.data)
            setDataSource(res.data.data)
        })
        .catch(err=>{
            console.log(err)
        })
    };
    const onChange=(values)=>{
        console.log(values)
        setOptionValue(values)
    }



    //获取表格数据
    function getData(nowPage) {
        axios("/shouFeiBiaoZhunBiao/chaXunFenYe", {
            methods: "get",
            params: { page: nowPage }
        })
            .then(res => {
                console.log(res)
                res.data.data.forEach((item, index, arr) => {
                    item.shouFeiBiaoZhunLeiXing = item.shouFeiBiaoZhuLeiXing.shouFeiBiaoZhunLeiXing
                    item.shouFeiLeiXingMingCheng = item.shouFeiLeiXing.shouFeiLeiXingMingCheng
                })
                console.log(res.data.data)
                setDataSource(res.data.data)
                setTotal(res.data.data.length)
            })
            .catch(err => {
                console.log(err)
            })
    }

    //获取所有收费标准
    const [option, setOption] = useState([{ value: "", label: "" }])
    function getShouFeiBianZhun() {
        axios("/shouFeiBiaoZhuLeiXing/chaXunAll")
            .then(res => {
                console.log(res)
                let temp = []

                if (res.data.code === 200) {
                    res.data.list.map((item, index, arr) => {
                        let obj = {}
                        console.log(item)
                        obj.value = item.id
                        obj.label = item.shouFeiBiaoZhunLeiXing
                        temp.push(obj)
                    })
                    setOption(temp)
                    console.log(temp)
                }
            })
            .catch(err => {
                console.log(err)
            })
    }

    useEffect(() => {
        getData(1)
        getShouFeiBianZhun()
    }, [])

    return (
        <div>
            <Modal title="查看收费标准表详细信息" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText="确认" cancelText="取消">
                <Form
                    layout="vertical"
                    onFinish={onFinish}
                    form={form}
                >

                    <Form.Item label="收费类型:" name="shouFeiLeiXingMingCheng" >
                        <Input placeholder="无" disabled />
                    </Form.Item>
                    <Form.Item label="收费名称:" name="shouFeiMingCheng">
                        <Input placeholder="无" disabled />
                    </Form.Item>
                    <Form.Item label="单价:" name="danJia">
                        <Input placeholder="无" disabled />
                    </Form.Item>
                    <Form.Item label="计量单位:" name="jiLiangDanWei">
                        <Input placeholder="无" disabled />
                    </Form.Item>
                    <Form.Item label="收费标准:" name="shouFeiBiaoZhunLeiXing">
                        <Input placeholder="无" disabled />
                    </Form.Item>
                </Form>
            </Modal>
            <Breadcrumb style={{ marginBottom: 24 }}>
                <Breadcrumb.Item>在院计费</Breadcrumb.Item>
                <Breadcrumb.Item>收费标准查询</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 70 }}>
                <Row justify="space-between" align="middle">
                    <Col span={24}>
                        <Form
                            layout="inline"
                            onFinish={onFinish}
                            name="chaXunForm"
                        >

                            <Form.Item label="收费类型：" name="shouFeiLeiXingMingCheng" >
                                <Input placeholder="请输入收费类型名称" />
                            </Form.Item>
                            <Form.Item label="收费标准：" name="shouFeiBiaoZhunLeiXing">
                                <Input.Group compact>
                                    <Select placeholder="请选择收费标准" style={{ width: '100%' }} options={option} onChange={onChange}>
                                    </Select>
                                </Input.Group>
                            </Form.Item>
                            <Form.Item >
                                <Button type="primary" icon={<SearchOutlined />} htmlType="submit">查询</Button>
                            </Form.Item>
                        </Form>
                    </Col>
                </Row>
                <Row style={{ marginTop: 24 }}>
                    <Col span={12}>
                        <Button type="primary" shape="round" icon={<DownloadOutlined />} onClick={exportTable}>
                            导出选中数据
                        </Button>
                    </Col>
                </Row>
            </div>
            <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 300 }}>
                <Divider orientation="left" style={{ fontWeight: 600, fontSize: 20 }}>收费标准表</Divider>
                <div className="export">
                <Table
                    dataSource={dataSource}
                    columns={columns}
                    pagination={paginationProps}
                // onRow={record => {
                //     return {
                //         onClick: event => { console.log(record); sessionStorage.setItem("info", JSON.stringify(record)) }, // 点击行
                //     };
                // }}
                />
                </div>

            </div>
        </div>
    );
}

export default ShouFeiBiaoZhun;
